<template>
    <div class="bottom">
        <img src="../assets/icon/shopping cart.png" @click="toCart">
        <label @click="toCart">总价格：￥{{$store.getters.pricecount}}</label>
        <router-link to="/ordered" tag="button">去&nbsp;结&nbsp;算</router-link>
        <div class="bar" @click="toCart"></div>
    </div>
</template>

<script>
export default {
  name: 'ButtomBar',
  props: {
  },
  methods: {
    toCart: function () {
      this.$store.commit('SHOPUP')
    }
  }
}
</script>
<style>
.bottom{
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 10;
    bottom: 10px;
}
.bottom img{
    width: 100px;
    height: 100px;
    position: absolute;
    margin-top: -40px;
    margin-left: 3vw;
}
.bottom button{
    align-self: center;
    position: absolute;
    margin-left: 70vw;
    width: 25vw;
    height: 50px;
    border-radius: 100px;
    border: 0;
    background-color: orange;
    color:white;
    font-size: 20px;
    font-weight: bolder;
}
.bottom button:hover{
    text-shadow: 0 0 5px white;
    box-shadow: 0 0 10px orange;
    transition: .3s;
}
.bar{
    align-self: center;
    width: 90vw;
    height: 50px;
    margin-left: 5vw;
    border-radius: 100px;
    background-color: rgba(56, 56, 56, 0.9);
}
.bottom label{
    color: #FFF;
    position: absolute;
    align-self: center;
    margin-top: 15px;
    margin-right: 0px;
}
</style>
